<template>
	<!-- 项目发布 -->
	<view class="bg-white container mt-2 h4">
		<u--form labelPosition="left" :model="caseFrom" ref="caseFrom" labelWidth="80" :rules="rules">
			<u-form-item label="项目名称" prop="title" borderBottom><u--input v-model="caseFrom.title" maxlength="50" border="none" placeholder="请编辑"></u--input></u-form-item>
			<u-form-item label="项目图片" prop="img_path" borderBottom>
				<view class="flex justify-end content-end head_img">
					<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="img" :maxCount="1" :max-size="600 * 1024" @oversize="oversize">
						<image src="/static/img2/my/default_img.png" mode="aspectFill" style="width:118rpx;height: 76rpx;"></image>
					</u-upload>
				</view>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="项目时间" prop="start_time" borderBottom>
				<view class="flex justify-end" @click="dataShow = true">
					<view class="font" style="color: #c0c4cc;" v-if="!dataTime">请编辑</view>
					<view v-else class="font">{{ dataTime }}</view>
				</view>
				<!-- <u--input v-model="dataTime" border="none" placeholder="请编辑" @focus="hideKey(), (dataShow = true)" style="font-size:28rpx"></u--input> -->
			</u-form-item>
			<u-calendar :show="dataShow" mode="range" @confirm="dataConfirm" @close="dataShow = false"></u-calendar>
			<u-form-item label="项目地点" prop="address" borderBottom><u--input v-model="caseFrom.address" border="none" placeholder="请编辑"></u--input></u-form-item>
			<u-form-item label="装机容量" prop="capacity" borderBottom>
				<u--input v-model="caseFrom.capacity" border="none" placeholder="请编辑">
					<template slot="suffix">
						<text v-if="caseFrom.capacity">MW</text>
					</template>
				</u--input>
			</u-form-item>
			<u-form-item label="应用机型" prop="model" borderBottom><u--input v-model="caseFrom.model" border="none" placeholder="请编辑"></u--input></u-form-item>
			<view class="img_warp">
				<u-form-item label="项目简介" prop="introduce"><textarea class="textarea mt-2 p-1" maxlength="-1" v-model="caseFrom.introduce"></textarea></u-form-item>
			</view>
			<view class="img_warp">
				<u-form-item label="项目内容" prop="content"><textarea class="textarea mt-2 p-1" maxlength="-1" v-model="caseFrom.content"></textarea></u-form-item>
			</view>
		</u--form>
		<button class="b_btn bg_main text-white h4 text-center" @click="submit">确认发布</button>
	</view>
</template>

<script>
import { uploadImage } from '@/api/common.js';
import { caseAdd, caseInfo, caseEdit } from '@/api/my/publish.js';
import util from '@/common/js/util.js';
export default {
	data() {
		return {
			caseFrom: {
				title: '', //标题
				address: '', //地址
				capacity: '', //装机容量
				model: '', //应用机型
				introduce: '', //介绍
				thumb: '', //缩略图 img
				content: '', //内容
				start_time: '' //时间
			},
			dataTime: '', //项目时间
			rules: {
				title: [
					{
						type: 'string',
						required: true,
						message: '请编辑项目名称',
						trigger: ['blur', 'change']
					}
				],
				thumb: [
					{
						type: 'string',
						required: true,
						message: '请上传项目图片',
						trigger: ['blur', 'change']
					}
				]
			},
			fileList: [],
			dataShow: false,
			caseId: ''
		};
	},
	onLoad(option) {
		this.caseId = option.id;
		this.getInfo(option.id);
	},
	methods: {
		// 项目详情
		getInfo(val) {
			let msg = {
				id: val,
				uid: uni.getStorageSync('userInfo').userId
			};
			caseInfo(msg)
				.then(res => {
					// console.log(res);
					this.caseFrom = { ...this.caseFrom, ...res.data };
					this.fileList.push({ url: res.data.thumb });
					this.dataTime = util.happenTimeFun(res.data.start_time, 'ymd') + ' 至 ' + util.happenTimeFun(res.data.end_time, 'ymd');
				})
				.catch(err => {
					console.log('获取项目详情失败', err);
				});
		},
		// 上传图片
		deletePic(event) {
			this.fileList.splice(0, 1);
			this.caseFrom.thumb = '';
		},
		async afterRead(event) {
			uploadImage(event)
				.then(res => {
					if (res.code == 0) {
						this.fileList.push({ url: res.img });
						this.caseFrom.thumb = this.fileList[0].url;
					} else {
						uni.$u.toast(res.msg);
					}
				})
				.catch(err => {
					console.log('头像上传失败');
				});
		},
		// 选择日期
		dataConfirm(e) {
			// console.log('日期', e);
			this.dataTime = e[0] + ' 至 ' + e[e.length - 1];
			this.caseFrom.start_time = e[0];
			this.caseFrom.end_time = e[e.length - 1];
			this.dataShow = false;
		},
		submit() {
			this.$refs.caseFrom
				.validate()
				.then(res => {
					let msg = {
						uid: uni.getStorageSync('userInfo').userId, //用户id
						...this.caseFrom
					};
					if (this.caseId) {
						// 编辑
						caseEdit({ id: this.caseId, ...msg })
							.then(res => {
								uni.$u.toast(res.msg);
								if (res.code == 0) {
									uni.navigateTo({
										url: '/subPages/my/company_main/index?tab=' + 2
									});
								}
							})
							.catch(err => {
								console.log('项目编辑失败', err);
							});
					} else {
						// 提交
						caseAdd(msg)
							.then(res => {
								// console.log(res);
								uni.$u.toast(res.msg);
								if (res.code == 0) {
									uni.navigateTo({
										url: '/subPages/my/company_main/index?tab=' + 2
									});
								}
							})
							.catch(err => {
								console.log('项目发布失败', err);
							});
					}
				})
				.catch(err => {
					console.log(err);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.textarea {
	width: 100%;
	height: 220rpx;
	background: #ffffff;
	border: 1px solid #c0c0c0;
}
.b_btn {
	width: 100%;
	height: 98rpx;
	line-height: 98rpx;
	position: fixed;
	bottom: 0;
	left: 0;
}
::v-deep .u-upload__button {
	width: 70rpx !important;
	height: 70rpx !important;
	border-radius: 100%;
}
::v-deep .head_img .u-upload__wrap__preview__image {
	width: 118rpx !important;
	height: 76rpx !important;
	border-radius: 10rpx;
}
::v-deep .u-upload__wrap__preview {
	margin: 0;
}
::v-deep .uni-input-input {
	text-align: right;
	color: #666666;
}
::v-deep .uni-input-placeholder {
	text-align: right;
}
::v-deep .u-form-item__body__right__message {
	text-align: right;
}
::v-deep .u-form-item__body__right__content__slot {
	justify-content: flex-end;
	padding-right: 20rpx;
}
::v-deep .u-input__content__field-wrapper__field {
	text-align: right !important;
}
::v-deep .u-upload__wrap {
	justify-content: flex-end;
}
::v-deep .img_warp .u-form-item__body {
	display: block !important;
}
</style>
